<template>
	<div class="product-list">
		<!-- 搜索区域 -->
		<div class="search-area">
			<div class="total">
				<span>操作总数：{{ total }}条</span>
				<span>入库总价：{{ totalInPrice }}元</span>
				<span>出库总价：{{ totalOutPrice }}元</span>
			</div>
			<el-form :inline="true">
				<el-form-item>
					<el-date-picker
						v-model="dateRange"
						type="daterange"
						@change="handleDateChange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button type="danger" @click="handleReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 表格区域 -->
		<el-table
			:data="tableData"
			:height="tableheight"
			border
			style="width: 100%"
			v-loading="loading"
		>
			<el-table-column prop="itemCode" label="商品编码" />
			<el-table-column prop="name" label="商品名称" />
			<el-table-column prop="type" label="类型">
				<template #default="{ row }">
					<el-tag :type="row.type === '入库' ? 'success' : 'warning'">
						{{ row.type }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="价格" />
			<el-table-column prop="quantity" label="库存数量" />
			<el-table-column prop="category" label="类别" />
			<el-table-column label="操作" width="100" align="center">
				<template #default="{ row }">
					<el-button type="danger" @click="handleDelete(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import api from '@/request'
import { ElMessage, ElMessageBox } from 'element-plus'

let router = useRouter()
const loading = ref(false)

// 分页参数
const total = ref(0)
const totalInPrice = ref(0)
const totalOutPrice = ref(0)
let dateRange = ref([])
let tableheight = ref(0)

// 搜索表单
const searchForm = reactive({
	itemCode: ''
})

// 表格数据
const tableData = ref([])

// 获取列表数据
const getList = async () => {
	try {
		loading.value = true
		// 这里替换为实际的API调用
		const { data } = await api.getProductHistory({
			startDate: dateRange.value[0].getTime(),
			endDate: dateRange.value[1].getTime()
		})
		totalInPrice.value = 0
		totalOutPrice.value = 0
		tableData.value = data.map(item => {
			if (item.type === 'add') {
				totalInPrice.value += Number(item.price)
			} else {
				totalOutPrice.value += Number(item.price)
			}
			return {
				...item,
				type: item.type === 'add' ? '入库' : '出库'
			}
		})
		total.value = data.length
	} catch (error) {
		ElMessage.error('获取数据失败')
	} finally {
		loading.value = false
	}
}

// 搜索
const handleSearch = () => {
	if (dateRange.value && dateRange.value.length) {
		total.value = 0
		totalInPrice.value = 0
		totalOutPrice.value = 0
		getList()
	} else {
		ElMessage.warning('请选择日期')
	}
}

// 重置
const handleReset = () => {
	const today = new Date()
	const dateString = today.toISOString().split('T')[0] // 获取今天的日期字符串
	const startTime = new Date(today.setHours(0, 0, 0, 0)) // 今天的起始时间
	const endTime = new Date(today.setHours(23, 59, 59, 999)) // 今天的结束时间
	console.log(
		`今天的日期: ${dateString}, 起始时间: ${startTime}, 结束时间: ${endTime}`
	)
	total.value = 0
	totalInPrice.value = 0
	totalOutPrice.value = 0
	dateRange.value = [startTime, endTime]
	tableData.value = []
	getList()
}

// 删除
const handleDelete = row => {
	ElMessageBox.confirm('确认删除该商品记录吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 这里替换为实际的删除API调用
		await api.deleteProductHistoryById(row.id)
		ElMessage.success('删除成功')
		getList()
	})
}

// 日期选择
const handleDateChange = values => {
	if (values) {
		if (dateRange.value[0].getTime() === dateRange.value[1].getTime()) {
			dateRange.value[0] = new Date(dateRange.value[0].setHours(0, 0, 0, 0))
			dateRange.value[1] = new Date(
				dateRange.value[1].setHours(23, 59, 59, 999)
			)
		}
	}
}

onMounted(() => {
	tableheight.value = document.body.clientHeight - 240
	const today = new Date()
	const dateString = today.toISOString().split('T')[0] // 获取今天的日期字符串
	const startTime = new Date(today.setHours(0, 0, 0, 0)) // 今天的起始时间
	const endTime = new Date(today.setHours(23, 59, 59, 999)) // 今天的结束时间
	console.log(
		`今天的日期: ${dateString}, 起始时间: ${startTime}, 结束时间: ${endTime}`
	)
	dateRange.value = [startTime, endTime]
	getList()
})
</script>

<style scoped lang="less">
.product-list {
	/* height: 100%; */
	padding: 20px;
	background-color: #f9f9f9;
}

.search-area {
	margin-bottom: 20px;
	background-color: #ffffff;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		span {
			margin-right: 20px;
			color: red;
		}
	}

	::v-deep(.el-form-item) {
		margin-bottom: 0;
	}
	::v-deep(.el-form-item:last-child) {
		margin-right: 0;
	}
}

.el-table {
	background-color: #ffffff;
	border-radius: 5px;
}

.el-table th {
	background-color: #f2f2f2;
	color: #333;
}

.pagination {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	color: #666;
}

.form-container {
	background-color: #f9f9f9;
	border-radius: 5px;
	padding: 20px;
}

.el-form-item {
	margin-bottom: 15px;
}

.el-input,
.el-input-number {
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}

.el-input:focus,
.el-input-number:focus {
	border-color: #409eff;
	box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
</style>
